<template>
    <fieldset>
        <legend>modal组件封装</legend>
        <child :visible="visible" @on-cancle="cancle" @on-confirm="confirm">
            <template v-slot:title>
                <p>模态框</p>
            </template>

            <template v-slot:body>
                <p>动画模态框</p>
            </template>
        </child>
        <button @click="showModal">点击显示模态框</button>
    </fieldset>
</template>


<script>
    import child from "../../child"

    export default{
        data(){
            return {
                visible:false
            }
        },
        components:{
            child
        },
        methods:{
            showModal(){
                this.visible = true;
            },
            cancle(){
                this.visible = false;
            },
            confirm(){
                this.visible = false;
            }
        }
    }

</script>

<style scoped>
     button{
        width: 150px;
        line-height: 30px;
        font-size: 18px;
        color: #fff;
        background: repeating-linear-gradient(to right,green,	#FF6A6A);
        border: none;
        border-radius: 8px;
    }
    p{
        font-size: 20px;
        font-weight: 900;
    }

</style>